<script setup>
import { onMounted } from 'vue'
import Web3 from 'web3';
const web3 = new Web3(Web3.givenProvider || 'https://bsc-dataseed.binance.org/');

console.log(web3)
// PancakeSwap 合约地址和 ABI
const contractAddress = '0x337610d27c682e347c9cd60bd4b3b107c9d34ddd';
const abi = [/* 合约 ABI */];

const contract = new web3.eth.Contract(abi, contractAddress);


</script>

<template>
    <div>
        <div class="container-fluid">
            <div id="about" class="container">
                <div class="row pad-top-40">
                    <div class="col-md-6 one-content">
                        <div class="" data-aos="fade-right">
                            <img class="title" src="../assets/image/title.png" alt="">
                            <div class="title-text">
                                Bara: The most unpredictable party animal in the crypto-lake! 🎉💦 <br>
                                Move over, boring stable coins! It's time for the wildest ride in the animal
                                kingdom.
                            </div>
                        </div>
                        <div data-aos="zoom-in" class="row row-container mar-top-40">
                            <div class="col contact-way-col">
                                <span>Pancakeswap</span>
                                <img data-aos="fade-right" class="contact-way-col-icon"
                                    src="../assets/image/pancake-swap.png" alt="">
                            </div>
                            <div class="col contact-way-col">
                                <span>coingecko</span>
                                <img data-aos="fade-right" class="contact-way-col-icon"
                                    src="../assets/image/jupiter.png" alt="">
                            </div>
                        </div>
                        <div data-aos="zoom-in" class="row row-container mar-top-23">
                            <div class="col contact-way-col">
                                <span>twitter</span>
                                <img data-aos="fade-right" class="contact-way-col-icon"
                                    src="../assets/image/binance.png" alt="">
                            </div>
                            <div class="col contact-way-col">
                                <span>telegram</span>
                                <img data-aos="fade-right" class="contact-way-col-icon"
                                    src="../assets/image/raydium.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div data-aos="fade-left" class="col-md-6 folat-container">
                        <div class="full-body-container">
                            <img class="full_body" src="../assets/image/full_body.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tokenoimic" class="token-omics">
            <div class="bara-steal-box">
                <img data-aos="fade-right" class="bara-steal" src="../assets/image/bara-steal.png" alt="">
                <div data-aos="fade-left" class="token-omics-text">
                    <h1>TOKENOMICS</h1>
                    <p>
                        6% airdroped to TML NFT Holders <br>
                        6% Charity Fund? <br>
                        88% LP pool <br>
                        What should TX fee be? Where should it go to
                    </p>
                </div>
            </div>
        </div>

        <div id="howtobuy" class="how-to-buy">
            <div data-aos="zoom-in-up">
                <h1>How To Buy</h1>
                <span>SMART CONTRACT ADDRESS (SOL)</span>
            </div>
            <div class="how-to-buy-content">
                <img data-aos="fade-right" class="how-to-buy-herad" src="../assets/image/slice.png" alt="">
                <div class="how-to-buy-col">
                    <img class="create-wallet" src="../assets/image/create-wallet.png" alt="">
                    <div class="describe">
                        <h3 data-aos="zoom-in">Create a Wallet</h3>
                        <p data-aos="fade-up" data-aos-duration="1200">download metamask or your wallet of choice from
                            the app store or google play store for free.
                            Desktop users, download the google chrome extension by going to metamask.io.</p>
                    </div>
                </div>
                <div class="how-to-buy-col">
                    <img class="get-some-bsc" src="../assets/image/get-some-bsc.png" alt="">
                    <div class="describe">
                        <h3 data-aos="zoom-in">Get Some BSC</h3>
                        <p data-aos="fade-up" data-aos-duration="1200">have BSC in your wallet to switch to $bara. If
                            you don’t have any BSC, you can buy directly
                            on Metamask, transfer from another wallet, or buy on another exchange and send it to your
                            wallet</p>
                    </div>
                </div>
                <div class="how-to-buy-col">
                    <img class="go-to-pancake-swap" src="../assets/image/pancake-swap.png" alt="">
                    <div class="describe">
                        <h3 data-aos="zoom-in">Go to pancakeswap</h3>
                        <p data-aos="fade-up" data-aos-duration="1200">connect to pancakeswap. Go to
                            https://pancakeswap.finance/swap in google chrome or on the
                            browser inside your Metamask app. Connect your wallet. Paste the $bara token address into
                            pancakeswap, select bara, and confirm. When Metamask prompts you for a wallet signature,
                            sign.</p>
                    </div>
                </div>
                <div class="how-to-buy-col">
                    <img class="switch-bsc" src="../assets/image/switch-bsc.png" alt="">
                    <div class="describe">
                        <h3 data-aos="zoom-in">Switch BSC for $bara</h3>
                        <p data-aos="fade-up" data-aos-duration="1200">Switch BSC for $bara. We have ZERO taxes so you
                            don’t need to worry about buying with a specific slippage, although you may need to use
                            slippage during times of market volatility.
                        </p>
                    </div>
                </div>
            </div>
            <div class="flex align-center overflow-hidden">
                <img data-aos="fade-right" class="product-img" src="../assets/image/product-img.png" alt="">
                <img data-aos="fade-left" class="prompt-marking" src="../assets/image/prompt-marking.png" alt="">
            </div>
        </div>

        <div class="join-the-community">
            <h1 data-aos="zoom-in">JOIN THE COMMUNITY</h1>

            <div class="bara_relax-box">
                <img data-aos="fade-up-right" class="bara_relax" src="../assets/image/bara_relax.png" alt="">
                <div class="token-amount">
                    <div class="token-amount" data-aos="zoom-in-up">
                        <span class="label">Token Supply:</span>
                        <span class="amount">420,690,000,000,000</span>
                    </div>
                    <div data-aos="fade-up-left" class="tips-box">
                        No Taxes, No Bullshit. It’s that simple. LP tokens are burnt, and contract ownership is
                        renounced.
                    </div>
                </div>
            </div>
        </div>

        <div class="afterbody">
            <div class="flex align-center" style="gap: 2.0313vw;">
                <img class="afterbody-icon" src="../assets/image/binance.png" alt="">
                <img class="afterbody-icon" src="../assets/image/jupiter.png" alt="">
                <img class="afterbody-icon" src="../assets/image/raydium.png" alt="">
            </div>
            <p data-aos="fade-up">
                Bara's ADHD-fueled adventures are about to make waves in the meme world! <br>
                Join the rave, embrace the chaos – Bara Coin: Where every transaction is a party! 🎊🌊

            <div class="filings">© 2024 by $Bara. All rights reserved!</div>
            </p>
        </div>
    </div>
</template>

<style scoped>
.flex {
    display: flex;
}

.align-center {
    align-items: center;
}

.overflow-hidden {
    overflow: hidden;
}

.title-text {
    margin-top: 1.25vw;
    font-size: 18px;
    color: #000000;
    line-height: 1.6;
    font-weight: bold;
}

.contact-way {
    margin-top: 1.0417vw;
    width: 25.8333vw;
    height: 2.9167vw;
}


.row-container {
    width: 25.8854vw;
    gap: 1.8229vw;
}

.contact-way-col {
    width: 12.0313vw;
    height: 3.6979vw;
    display: flex;
    padding-right: 1.25vw;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
    background: url('../assets/image/col-way-bg.png') no-repeat;
    background-size: 100% 100%;
}

.contact-way-col span {
    flex: 1;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
    font-size: .8333vw;
}

.contact-way-col-icon {
    width: 36px;
    height: 36px;
}

.pad-top-40 {
    padding: 2.0833vw 0;
}

.mar-top-40 {
    margin-top: 2.0833vw;
}

.mar-top-23 {
    margin-top: 23px;
}

.full-body-container {
    position: relative;
}

.full_body {
    display: block;
    width: 25.3646vw;
    height: 29.8958vw;
}

.full-body-container::before {
    content: '';
    width: 35.0569vw;
    height: 32.0833vw;
    position: absolute;
    left: 15.5729vw;
    background: url('../assets/image/right-top-bg.png') no-repeat;
    background-size: 100% 100%;
}

.title {
    margin-top: 1.9792vw;
    display: block;
    width: 21.7188vw;
    height: 3.6458vw;
}

.container-fluid {
    background: #F2E22A;
    overflow: hidden;
}

.container {
    padding-top: 2.7083vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.token-omics {
    flex: 1;
    background-color: #2F231C;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.bara-steal-box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.bara-steal-box::after {
    content: '';
    width: 35.9375vw;
    height: 29.6875vw;
    position: absolute;
    left: -13.4375vw;
    background: url('../assets/image/bara-steal-after.png') no-repeat;
    background-size: 100% 100%;
}

.bara-steal {
    margin-top: 1.3021vw;
    margin-left: 5.2083vw;
    width: 27.2631vw;
    height: 30.1563vw;
}

.token-omics-text {
    margin-left: 4.0313vw;
    color: #F2E22A;
}

.token-omics-text h1 {
    font-size: 2.9167vw;
    font-weight: bold;
}

.token-omics-text p {
    margin-top: 2.0313vw;
    font-size: 16px;
    font-weight: bold;
}

.how-to-buy {
    padding: 0 18.75vw;
    padding-top: 3.5417vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #F2E22A;
    position: relative;
}

.how-to-buy::after {
    content: '';
    width: 34.4271vw;
    height: 36.9271vw;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    background: url('../assets/image/bara_sleep.png') no-repeat;
    background-size: 100% 100%;
}

.how-to-buy h1 {
    font-weight: bold;
    color: #0F0E02;
    font-size: 2.9167vw;
}

.how-to-buy span {
    font-weight: bold;
    color: #0F0E02;
    font-size: .8333vw;
}

.how-to-buy-content {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 2.5vw;
    gap: 26px;
}

.how-to-buy-herad {
    width: 8.0729vw;
    height: 9.5833vw;
    position: absolute;
    top: -8.82vw;
    z-index: 1;
    left: 2.6429vw;
}

.how-to-buy-col {
    flex: 1;
    height: 152px;
    padding: 1.6667vw 0;
    padding-right: 2.8125vw;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    background: url('../assets/image/border-h5-bg.png') no-repeat;
    background-size: 100% 100%;
}

.create-wallet {
    width: 98px;
    height: 98px;
    margin-left: 43.2896px;
    margin-right: 56px;
}

.get-some-bsc {
    width: 175.6208px;
    height: 102px;
    margin-right: 17.1904px;
}

.go-to-pancake-swap {
    width: 96px;
    height: 96px;
    margin-left: 37.2896px;
    margin-right: 64px;
}

.switch-bsc {
    width: 143.4192px;
    height: 50.8096px;
    margin-left: 29.7392px;
    margin-right: 13px;
}

.describe h3 {
    color: #0F0E02;
    font-weight: bold;
    font-size: 20px;
}

.describe p {
    color: #0F0E02;
    font-weight: bold;
    font-size: 14px;
    line-height: -1;
    white-space: pre-wrap;
    display: inline;
    overflow: hidden;
    box-sizing: border-box;
    /* border-right: 3px solid #000;
    animation: typing 4s steps(40, end), blink-caret .75s step-end infinite; */
}

@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

@keyframes blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: black;
    }
}

.product-img {
    width: 29.4792vw;
    height: 21.6667vw;
}

.prompt-marking {
    width: 32.7604vw;
    height: 27.7083vw;
}

.join-the-community {
    padding-top: 4.3229vw;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #2F231C;
    overflow: hidden;
}

.join-the-community::after {
    content: '';
    width: 25.9896vw;
    height: 32.0833vw;
    position: absolute;
    left: 0;
    bottom: 0;
    background: url('../assets/image/bara_disc.png') no-repeat;
    background-size: 100% 100%;
}

.join-the-community h1 {
    font-size: 2.9167vw;
    font-weight: bold;
    color: #F2E22A;
}

.bara_relax-box {
    display: flex;
    flex-direction: row;
    margin-top: 5.1042vw;
}

.bara_relax {
    width: 29.8438vw;
    height: 24.1146vw;
}

.token-amount {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.token-amount .label {
    font-weight: bold;
    color: #F2E22A;
    font-size: 14px;
}


.token-amount .amount {
    font-weight: bold;
    color: #F2E22A;
    font-size: 24px;
}

.token-amount .tips-box {
    margin-top: 1.5104vw;
    margin-left: -30px;
    width: 34.4604vw;
    height: 7.5521vw;
    display: flex;
    align-items: center;
    font-weight: bold;
    color: #0F0E02;
    line-height: 1.5625vw;
    font-size: .9333vw;
    text-align: left;
    padding: 0 1.0417vw 0 1.4583vw;
    box-sizing: border-box;
    background: url('../assets/image/border-bg.png') no-repeat;
    background-size: 100% 100%;
}


.afterbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 22.5vw;
    padding-top: 2.7604vw;
    box-sizing: border-box;
    line-height: 1.4;
    background-color: #F2E22A;
}

.afterbody p {
    margin-top: 2.1875vw;
    text-align: center;
    font-weight: bold;
    color: #0F0E02;
    font-size: 24px;
}

.afterbody .filings {
    margin-top: 1.0417vw;
    text-align: center;
    font-weight: bold;
    color: #0F0E02;
    font-size: 24px;
}

.afterbody .afterbody-icon {
    width: 4.3229vw;
    height: 4.3229vw;
}

@media (max-width: 750px) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
    }

    .title {
        width: 208.5008px;
        height: 35.5008px;
        margin: auto;
    }

    .mar-top-40 {
        margin-top: 20px;
    }

    .title-text {
        margin-top: 12.5px;
        font-size: 9px;
    }

    .contact-way-col-icon {
        width: 21.25px;
        height: 21.25px;
    }

    .how-to-buy {
        line-height: 0.8;
    }

    .contact-way {
        width: 287px;
        height: 28px;
        margin-top: 12px;
        margin-bottom: 16px;
    }

    .how-to-buy-col:nth-of-type(1),
    .how-to-buy-col:nth-of-type(2),
    .how-to-buy-col:nth-of-type(4) {
        padding-right: 6px;
        box-sizing: border-box;
        background: url('../assets/image/border-h5-bg.png') no-repeat;
        background-size: 100% 100%;
    }

    .how-to-buy-col:nth-of-type(3) {
        padding-right: 7px;
        box-sizing: border-box;
        background: url('../assets/image/border-h5-bg-two.png') no-repeat;
        background-size: 100% 100%;
    }

    .row-container {
        width: 278px;
    }

    .contact-way-col {
        width: 130px;
        height: 29.835px;
    }

    .contact-way-col span {
        font-size: 8px;
    }

    .pancake-swap {
        width: 17px;
        height: 17px;
    }

    .jupiter {
        width: 19px;
        height: 16px;
    }

    .binance {
        width: 17.5px;
        height: 17.5px;
    }

    .raydium {
        width: 16px;
        height: 16px;
    }

    .folat-container {
        margin-top: 7.5px;
    }

    .bara-steal-box {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .bara-steal-box::after {
        width: 345px;
        height: 285px;
        left: -129px;
        transform: scale(1.15);
    }

    .token-omics-text h1 {
        margin-top: 28px;
        font-size: 32px;
    }

    .how-to-buy h1 {
        font-size: 32px;
    }

    .how-to-buy span {
        font-size: 12px;
    }

    .how-to-buy-col {
        width: 343px;
        height: 98.5px;
        padding: 16px 0;
    }

    .create-wallet {
        width: 49px;
        height: 49px;
        margin-left: 14.5px;
        margin-right: 13px;
    }

    .get-some-bsc {
        width: 55.7px;
        height: 37.215px;
        margin-left: 14.5px;
        margin-right: 9.5px;
    }

    .go-to-pancake-swap {
        width: 48px;
        height: 48px;
        margin-right: 14px;
        margin-left: 17.5px;
    }

    .switch-bsc {
        width: 67.71px;
        height: 25px;
        margin-left: 5.5px;
        margin-right: 6.5px;
    }

    .describe h3 {
        font-size: 10px;
    }

    .describe p {
        font-size: 7px;
    }

    .product-img {
        width: 177px;
        height: 130px;
    }

    .prompt-marking {
        width: 223.785px;
        height: 189px;
        margin-right: -50px;
    }

    .join-the-community h1 {
        font-size: 24px;
    }

    .bara_relax-box {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .token-amount .label {
        font-size: 12px;
    }

    .token-amount .amount {
        font-size: 15px;
    }

    .token-amount .tips-box {
        width: 234.5px;
        height: 64.5px;
        margin-left: 0;
        font-size: 8px;
        line-height: 15px;
        padding: 10.5px 8.5px 9px 8.5px;
        box-sizing: border-box;
    }

    .bara_relax {
        margin-top: 29px;
        width: 227.5px;
        height: 181px;
    }

    .join-the-community::after {
        width: 148.5px;
        height: 238px;
    }

    .afterbody {
        padding: 0 16px;
        padding-top: 20px;
    }

    .afterbody .tail-icon {
        width: 94.3px;
        height: 35px;
    }

    .afterbody p {
        margin-top: 18.5px;
        margin-bottom: 10px;
        font-size: 11px;
        word-wrap: break-word;
    }

    .one-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .full_body {
        width: 161px;
        height: 208.5008px;
    }

    .folat-container {
        display: flex;
        justify-content: center;
    }

    .full-body-container::before {
        width: 246.5008px;
        height: 246px;
        left: 65.5008px;
    }

    .afterbody .afterbody-icon {
        width: 40.745px;
        height: 40.745px;
    }

    .afterbody .filings {
        font-size: 11px;
    }
}
</style>